<template>
  <div :loading="loading" class="gl_contentBox gl_heightFull">
    <el-divider content-position="left" class="gl_ft_weight">学员信息</el-divider>
    <div class="info">
      <div class="one">
        <span class="title">学员姓名</span>
        <span>{{ studentInfo.name }}</span>
      </div>
      <div class="one">
        <span class="title">证件号码</span>
        <span>{{ studentInfo.idCardNumber }}</span>
      </div>
      <div class="one">
        <span class="title">学员性别</span>
        <span>{{ studentInfo.genderCode === 'M' ? '男' : '女' }}</span>
      </div>
      <div class="one">
        <span class="title">所在班级</span>
        <span v-for="(item, index) in studentInfo.classStudents" :key="index">
          <el-tag style="margin-right:10px">{{ item.class && item.class.name }}</el-tag>
        </span>
      </div>
      <div class="one">
        <span class="title">教练</span>
        <span v-for="(item, index) in studentInfo.studentCoachs" :key="index">{{ item.employee && item.employee.name }}</span>
      </div>
    </div>

    <el-divider content-position="left" class="gl_ft_weight">
      <span class="gl_mr_15">图像信息采集</span>
      <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="collect()">{{ studentInfo.face ? '重新采集' : '采集' }}</el-button>
    </el-divider>
    <div v-if="studentInfo.face">
      <img class="game_coverimg" :src="studentInfo.face.faceUrl" alt="">
    </div>
    <div v-else class="gl_noData">
      <p>暂无数据</p>
    </div>
    <faceCollection ref="faceCollection" @refresh="getPageList" />
  </div>

</template>
<script>
import faceCollection from './faceCollection.vue';
import { api_GET_ClubStudent } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubStudentQO, RegisterStudentDto } from '@/lib/form/hall/swaggerForm';
export default {
  components: { faceCollection },
  data() {
    return {
      qo: new Api_GET_ClubStudentQO(),
      studentInfo: new RegisterStudentDto(),
      loading: false,
      id: ''
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getPageList();
  },
  methods: {
    getPageList(page) {
      this.qo.Ids = this.id;
      this.qo.IncludeStudentCoachs = true;
      this.qo.IncludeClassStudents = true;
      this.qo.IncludeStudentCoachs = true;
      this.qo.IncludeGender = true;
      this.qo.IncludeFace = true;
      this.qo.IncludeStudentMembershipCards = true;
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.IsEnable = null;
      this.loading = true;
      api_GET_ClubStudent(this.qo).then((res) => {
        if (res && res.totalCount === 1) {
          this.studentInfo = JSON.parse(JSON.stringify(res.items[0]));
        }
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 打开摄像头
    collect() {
      const that = this;
      this.$refs.faceCollection.dialogVisible = true;
      this.$refs.faceCollection.collect();
      this.$refs.faceCollection.collectQO.studentId = this.id;
      this.$refs.faceCollection.info = { 'name': that.studentInfo.name, 'idCardNumber': that.studentInfo.idCardNumber };
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>
<style lang="scss" scoped>
.info {
  height: 220px;
  padding-left: 10px;
  .one {
    line-height: 42px;
    font-size: 14px;
    .title {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
.game_coverimg {
  max-width: 300px;
  max-height: 300px;
}
</style>
